<template>
  <div style="background-color: #fff;">
    <TopBar title="新信息"></TopBar>
    <van-cell-group>
      <van-field
        v-model="mailboxSend.recipientId"
        label="收件人学号"
        clearable
        left-icon="star-o"
        right-icon="warning-o"
        placeholder="请输入对方的学号"
      />
      <van-field
        v-model="mailboxSend.recipientName"
        clearable
        label="收件人姓名"
        left-icon="friends-o"
        placeholder="请输入对方的姓名"
        right-icon="warning-o"
      />
      <van-field
        v-model="mailboxSend.topic"
        clearable
        label="标题"
        left-icon="chat-o"
        placeholder="请输入标题(不超过十个字)"
        maxlength="10"
        right-icon="warning-o"
      />
      <van-field
        v-model="mailboxSend.content"
        rows="16"
        clearable
        autosize
        type="textarea"
        maxlength="1000"
        placeholder="请输入和对方说的话"
        show-word-limit
      />
    </van-cell-group>
    <van-row style="text-align: right;">
      <van-button type="default" @click="nextTick">下一步</van-button>
    </van-row>
    <van-dialog
      v-model="show"
      title="发送"
      confirmButtonText="发送信息"
      cancelButtonText="保存至草稿箱"
      show-cancel-button
      :before-close="beforeClose"
    >
      <van-field label="发件人笔名" v-model="mailboxSend.pseudonym" placeholder="请输入您的笔名" />
    </van-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import TopBar from "@/views/component/topBar";
export default {
  components: {
    TopBar
  },
  data() {
    return {
      mailboxSend: {},
      show: false
    };
  },
  methods: {
    nextTick() {
      if (
        !this.mailboxSend.recipientId ||
        !this.mailboxSend.recipientName ||
        !this.mailboxSend.topic ||
        !this.mailboxSend.content
      ) {
        return this.$message({
          type: "danger",
          message: "请完成所有内容的填写"
        });
      }
      this.show = true;
    },
    beforeClose(action, done) {
      // 点击事件 - 备注按钮提示框
      if (action === "confirm") {
        // 确认
        this.mailboxSend.sendStatus = "1";
        this.getSend();
        done(); // 关闭提示框
      } else if (action === "cancel") {
        // 取消
        this.mailboxSend.sendStatus = "0";
        this.getSend();
        done(); // 关闭提示框
      }
    },
    getSend() {
      this.$api
        .post("/api/mailbox/send", this.mailboxSend)
        .then(res => {
          this.$message({
            type: "success",
            message: res.data.message
          });
          this.$router.go(-1);
        })
        .catch(err => {
          this.$message({
            type: "danger",
            message: err.message
          });
          console.log(err);
        });
    }
  },
  mounted() {
    this.mailboxSend.sendId = this.userInfo.number;
    this.mailboxSend.sendName = this.userInfo.name;
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  }
};
</script>

<style scope>
</style>